<template>
  <div>
    <div class="div2">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="2">
          <template slot="title">
            <i class="header-icon el-icon-s-order"></i
            ><span class="collapsetitle">角色信息列表</span>
          </template>
          <!-- 添加角色管理 -->
          <div class="div3">
            <el-button
              size="mini"
              style="background-color: #7accc6; color: white"
              @click="oenAdd"
              class="pan-btn blue-btn"
              >添加角色管理</el-button
            >

            <el-dialog
              title="添加角色管理"
              :visible.sync="dialogVisible"
              width="50%"
            >
              <div style="height: 30px">
                <span>角色名：</span>
                <el-input
                  v-model="RoleNmae"
                  placeholder="请输入角色名"
                  style="width: 200px; margin-left: 20px"
                  size="mini"
                ></el-input>
              </div>

              <div style="margin-top: 20px">
                <span>选择用户：</span>
                <el-transfer
                  :titles="['选择用户', '绑定用户']"
                  :button-texts="['解除', '绑定']"
                  filterable
                  :filter-method="filterMethod"
                  filter-placeholder="请输入部门名称"
                  v-model="value"
                  :data="data"
                >
                </el-transfer>
              </div>

              <span
                slot="footer"
                class="dialog-footer"
                style="margin-right: 37%"
              >
                <el-button @click="collapse">取 消</el-button>
                <el-button
                  type="primary"
                  v-show="this.vutton == 1"
                  @click="AddUR"
                  >确 定</el-button
                >
                <el-button
                  type="primary"
                  v-show="this.vutton == 2"
                  @click="UPRole"
                  >修 改</el-button
                >
              </span>
            </el-dialog>
          </div>
          <!-- 显示 -->
          <div class="collapsediv1">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              class="table1"
              @selection-change="handleSelectionChange"
              stripe
            >
              <el-table-column type="selection" width="55"> </el-table-column>

              <el-table-column prop="RoleNmae" label="角色名" width="200px">
              </el-table-column>

              <el-table-column prop="PersonnelName" label="用户名">
              </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="GURole(scope.$index, scope.row)"
                    >编辑用户</el-button
                  >
                  <el-button
                    size="mini"
                    @click="openDialog(scope.$index, scope.row)"
                    >编辑权限</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="DelRole(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分配权限 -->
          <div>
            <el-dialog
              title="请选权限"
              :visible.sync="dialogVisiblea"
              width="30%"
            >
              <el-tree
                :data="TreeData"
                show-checkbox
                node-key="MenudId"
                ref="tree"
                highlight-current
                :props="defaultProps"
                :accordion="true"
              >
              </el-tree>

              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisiblea = false">取 消</el-button>
                <el-button type="primary" @click="AddRM()">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      activeNames: ["2"],
      handleSelectionChange: "",
      dialogVisible: false, //打开添加角色
      dialogVisiblea: false, //打开分配权限
      RoleNmae: "", //角色名
      data: [], //获取用户信息
      value: [], //获取绑定的用户
      depName: "", //用户查询条件
      RoleId: "",
      vutton: 1,

      TreeData: [], //获取菜单信息
      defaultProps: {
        children: "menudModels",
        id: "MenudId",
        label: "MenudName",
      }, //绑定菜单信息
      MenuIds: [], //获取半选中节点
      MenuIdall: [], //获取以选中节点
    };
  },
  created() {
    this.GetRole();
    this.GetPerson();
  },
  computed: {},
  methods: {
    GetRole() {
      this.$http.get("Role/GetRole").then((res) => {
        this.tableData = res.data.Data;
      });
    },
    //穿梭框获取用户
    GetPerson() {
      this.$http.get("Role/GetPerson?depName" + this.depName).then((res) => {
        var data = [];
        res.data.Data.forEach((item) => {
          data.push({
            label: item.PersonnelName + "-" + item.depName,
            key: item.PersonnelId,
            aa: item.depName,
            pinyin: item.PersonnelId,
          });
        });
        this.data = data;
      });
    },
    //穿梭框搜索
    filterMethod(query, item) {
      return item.aa.indexOf(query) > -1;
    },
    //打开添加
    oenAdd() {
      this.dialogVisible = true;
      this.vutton = 1;
    },
    //添加角色用户
    AddUR() {
      this.$http
        .post(`Role/AddUR?RoleNmae=${this.RoleNmae}`, this.value)
        .then((res) => {
          if (this.RoleNmae == "") {
            this.$message({
              message: "请输入角色名",
              type: "warning",
            });
          } else if (res.data.Data == true) {
            this.$message({
              message: "恭喜你，添加成功",
              type: "success",
            });
            this.GetRole();
            this.dialogVisible = false;
            this.value = [];
            this.RoleNmae = "";
            this.RoleId = "";
          } else if (res.data.Data == false) {
            this.$message({
              message: "角色重名了哦",
              type: "warning",
            });
          }
        });
    },
    //关闭模态
    collapse() {
      this.dialogVisible = false;
      this.value = [];
      this.RoleNmae = "";
      this.RoleId = "";
    },
    //反填角色
    GURole(index, row) {
      this.dialogVisible = true;
      this.vutton = 2;
      this.$http.get("Role/GURole?RoleId=" + row.RoleId).then((res) => {
        this.RoleNmae = row.RoleNmae;
        this.RoleId = row.RoleId;
        res.data.Data.forEach((item) => {
          this.value.push(item.PersonnelId);
        });
      });
    },
    //修改
    UPRole() {
      this.$http
        .post(
          `Role/UPRole?RoleNmae=${this.RoleNmae}&RoleId=${this.RoleId}`,
          this.value
        )
        .then((res) => {
          if (this.RoleNmae == "") {
            this.$message({
              message: "请输入角色名",
              type: "warning",
            });
          } else if (res.data.Code == 200) {
            this.$message({
              message: "恭喜你，修改成功",
              type: "success",
            });
            this.GetRole();

            this.value = [];
            this.RoleNmae = "";
            this.RoleId = "";
            this.dialogVisible = false;
          }
        });
    },
    //删除角色
    DelRole(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete("Role/DelRole?RoleId=" + row.RoleId).then((res) => {
            if (res.data.Code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.GetRole();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //打开分配权限模态
    async openDialog(index, row) {
      this.dialogVisiblea = true;
      await this.$http.get("Menud/getmenusAll").then((res) => {
        this.TreeData = res.data;
      });
      this.RoleId = row.RoleId;

      //反填
      this.$nextTick(() => {
        this.$http.get("Menud/getRM?RoleId=" + this.RoleId).then((res) => {
          this.$refs.tree.setCheckedKeys([]);
          res.data.filter((u) => {
            var node = this.$refs.tree.getNode(u.Mid);
            if (node.isLeaf) {
              this.$refs.tree.setChecked(node, true);
            }
          });
        });
      });
    },
    //添加权限
    AddRM() {
      this.MenuIds = [];
      this.MenuIdall = [];
      //获取全选中节点(不包含父节点)
      this.MenuIds = this.$refs.tree.getCheckedKeys();
      //获取半选中节点
      this.MenuIdall = this.$refs.tree.getHalfCheckedKeys();
      this.$http
        .post(
          `Menud/AddRM?RoleId=${this.RoleId}&Mid=${this.MenuIds.concat(
            this.MenuIdall
          ).toString()}`
        )
        .then((res) => {
          if (res.data.Code == 200) {
            this.$notify({
              title: "成功",
              message: "编辑成功",
              type: "success",
            });
            this.dialogVisiblea = false;
          }
        });
    }, //分配角色
  },
};
</script>
 <style  scoped>
.collapsetitle,
.header-icon {
  color: white;
  font-size: 20px;
  margin-left: 10px;
}
.collapsediv1 {
  margin-top: 20px;
  margin-left: 20px;
}
.div2 {
  margin-top: 20px;
}
.table1 {
  width: 99%;
  border: 1px solid #eceef5;
  border-radius: 6px;
}
.div3 {
  margin-left: 20px;
  margin-top: 20px;
}
</style>
<style>
.el-collapse-item__header {
  background-color: #7accc6;
  height: 30px;
  border-radius: 4px 4px 0px 0px;
}
.el-collapse {
  border-radius: 6px;
}
.el-collapse-item__wrap {
  border-radius: 0px 0px 6px 6px;
  border: 1px solid #7accc6;
  border-top: 0px solid #7accc6;
}
.el-transfer {
  margin-top: 20px;
}
</style>